(function() {
	var departments = ["President", "Vicepresident", "iOS"];

	$(function() {
		
		for (var i = 0; i < 2; i++) {
			$(".box-template").clone().appendTo("#everyone").removeClass("box-template").addClass("box president").text("president");
		}
		for (var i = 0; i < 2; i++) {
			$(".box-template").clone().appendTo("#everyone").removeClass("box-template").addClass("box vicepresident").text("vicepresident");
			$(".box-template").clone().appendTo("#everyone").removeClass("box-template").addClass("box ios").text("iOS");
		}
		for (var i = 0; i < 3; i++) {
			$(".box-template").clone().appendTo("#everyone").removeClass("box-template").addClass("box ios").text("ios");
		}
		
		var boxes = $(".box").hover(function(){
			
		});

		function move(clase) {
			var actual = $('#actual');

			pos1 = $('#actual').position();
			pos1.left += parseInt(actual.css("margin-left"));
			pos1.top += parseInt(actual.css("padding-top"));
			
			var all = $("." + clase);
			
			jQuery.each(all, function() {
				var pos2 = $(this).position();

				// $(this).css("position","relative");
	
				var div = $(this).clone().css("position", "absolute").appendTo("#actual");
	
				$(this).remove();
				div.animate({
					'top' : pos2.top + 'px',
					'left' : pos2.left + 'px'
				}, 0);
				div.animate({
					'top' : pos1.top + 'px',
					'left' :pos1.left + 'px'
				}, 1000, function() {
					var float_css = { 'float' : 'left', 'position' : 'relative', 'top' : '0px', 'left': '0px', 'margin-right':'10px' };
					$(this).appendTo("#actual").css(float_css);
				});
	
				pos1.left += 115;
			});
			

			// $(this).effect("transfer", { to: $(".box")}, 1000);
			//
			// $(this).animate({
			// "opacity": "0.0"
			// }, 200, function() {
			// $(this).remove();
			// $(this).appendTo("#actual").css("opacity","0").animate({
			// "opacity": "1.0"
			// }, 1000, function() {
			//
			// });
			// });
		}
		
		function resetActual() {
			var actuals = $("#actual .box");
			
			actuals.remove().appendTo("#everyone");
		}
		
		$.each(departments, function(index, value) {
			var listEl = $(".dept-panel-list-item.template").clone().appendTo("#dept-panel-list").removeClass("template");
			
			$("a", listEl).text(value).attr("id",value.toLowerCase());
			$("div", listEl).text(index);
		});
		
		$(".showDepts").click(function() {
			$("#dept-panel").slideToggle("slow");
		});			
		
		$.each(departments, function(index, value) {
			$("#"+value.toLowerCase()).click(function() {
			
			resetActual();
			
			var id = this.id;
			var numItems = $("." + id).length;
			var width = numItems * 113;
			$("#actual").css("width",width);
			move(id);
		});
			
		}); 
	});
})();
